<template>
  <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
    <!-- <el-table
      :data="tableData"
      border
      v-loading="loading"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column
        prop="billNum"
        label="单据编号"
        width="80"
      ></el-table-column>
      <el-table-column prop="billName" label="单据名称"></el-table-column>
      <el-table-column prop="" label="单据类型"></el-table-column>
      <el-table-column prop="directorName" label="创建人"></el-table-column>
      <el-table-column prop="directorTime" label="创建时间"></el-table-column>
      <el-table-column prop="" label="处理人"></el-table-column>
      <el-table-column prop="billStatus" label="单据状态"></el-table-column>
    </el-table> -->

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column type="index" label="序号">
        <template v-slot="scope">
          <span>{{
            (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="billNum" label="单据编号" width="180">
      </el-table-column>
      <el-table-column prop="billName" label="单据名称"> </el-table-column>
      <!-- <el-table-column prop="flowName" label="单据类型"> </el-table-column> -->
      <el-table-column prop="billType" label="单据类型">
        <template #default="{ row }">
          {{ formatterStatusType(row) }}
        </template>
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="assigneeName" label="处理人"> </el-table-column>
      <el-table-column prop="flowStatus" label="单据状态">
        <template #default="{ row }">
          <div :class="formatterStatusColor(row)"></div>
          {{ formatterStatusLabel(row) }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template #default="{ row }">
          <el-button
            type="text"
            size="small"
            @click="handleDetail(row)"
            v-auth="`/work/dashboard-self--look`"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <re-pagination
      v-if="total > 0"
      :total="total"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />
  </el-skeleton>
</template>

<script lang="ts">
import { ref, defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
// import { postContractTodoList } from "/@/api/work";
import { postArvAccList } from "/@/api/acceptance";

import { storageLocal } from "/@/utils/storage";
import RePagination from "/@/components/RePagination/index.vue";
import { FlowStatusEnum, BillStatusMap } from "../../types";

export default defineComponent({
  name: "Self",
  components: {
    RePagination
  },
  setup() {
    const router = useRouter();
    let loading = ref<boolean>(false);
    let tableData = ref([]);
    let total = ref<number>(0);
    let formInline = reactive({
      pageNum: 1,
      pageSize: 10
    });

    const getTableData = async (obj: Object = {}) => {
      const info = storageLocal.getItem("info");
      const params = {
        createUser: info ? info?.userId : ""
      };
      const { code, data } = await postArvAccList(Object.assign(params, obj));
      if (code === 200) {
        tableData.value = data.list;
        total.value = data.rows;
      }
    };

    const handleDetail = row => {
      const {
        // contractId,
        nodeDefId,
        instanceId,
        flowId,
        preNodeId,
        flowType,
        flowBaseId,
        id
      } = row;
      let pathUrl = "/projectsA/acceptance/arrival/detail";
      let pathQuery = {
        mode: "read",
        contractId: id,
        nodeDefId: instanceId ? nodeDefId.toUpperCase() : "ACT_010",
        instanceId,
        flowId,
        source: "work",
        preNodeId
      };

      if (flowType && ["5", "6"].includes(flowType)) {
        pathUrl = "/projectsA/acceptance/concealed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: flowType,
          contractId: flowBaseId
        });
      } else if (flowType && ["7", "8"].includes(flowType)) {
        pathUrl = "/projectsA/acceptance/completed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: flowType,
          contractId: flowBaseId
        });
      } else if (flowType && ["9", "10"].includes(flowType)) {
        pathUrl = "/projectsA/acceptance/material/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: flowType,
          contractId: flowBaseId
        });
      } else if (flowType && ["11", "15"].includes(flowType)) {
        pathUrl = "/projectsA/quality/inspection/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: flowType,
          contractId: flowBaseId
        });
      }
      router.replace({
        path: pathUrl,
        query: pathQuery
      });
    };

    // 格式化状态
    const formatterStatusLabel = row => {
      return FlowStatusEnum[row.flowStatus].label;
    };

    // 格式化验收类型
    const formatterStatusType = row => {
      return BillStatusMap.get(row.flowType);
    };

    const formatterStatusColor = row => {
      return {
        redColor: row.flowStatus === 0,
        greenColor: row.flowStatus === 1,
        grayColor: row.flowStatus === 2
      };
    };

    const handleSearch = () => {
      getTableData(formInline);
    };
    getTableData(formInline);

    return {
      total,
      formInline,
      loading,
      tableData,
      handleDetail,
      handleSearch,
      formatterStatusLabel,
      formatterStatusType,
      formatterStatusColor
    };
  }
});
</script>

<style lang="scss" scoped></style>
